<template>
    <div class="change-wrap">
        <div class="header-top">
            <div class="header">
                <el-dropdown  v-if="name">
                    <span class="el-dropdown-link">
                        <div v-if="name" class="login name">{{name}} <div class="arrow"></div></div>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item><span style="display: block;" @click="linkTo('/changePassword')">密码修改</span></el-dropdown-item>
                        <el-dropdown-item><span style="display: block;" @click="loginOut()">退出</span></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <div @click="linkTo('/login')" v-if="!name" class="login login1">登录</div>
                <!-- <div class="tip">消息</div> -->
                <div @click="linkTo('/ccOrderHand')" class="header-select">我的创巢</div>
            </div>
            <div class="nav-wrap">
                <div @click="linkTo('/')" class="logo"></div>
            </div>
        </div>
        <div class="change-container">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>修改密码</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="content1">
                <el-form :model="information" :rules="rules" ref="information" label-width="200px">
                    <el-form-item prop="oldPwd">
                        <div class="content-list">
                            <div class="name">原密码：</div>
                            <el-input
                            type="password"
                            v-model="information.oldPwd"
                            clearable>
                            </el-input>
                        </div>
                    </el-form-item>
                    <el-form-item prop="newPwd">
                        <div class="content-list">
                            <div class="name">新密码：</div>
                            <el-input
                            type="password"
                            v-model="information.newPwd"
                            clearable>
                            </el-input>
                        </div>
                    </el-form-item>
                    <el-form-item prop="confirmPwd">
                        <div class="content-list">
                            <div class="name">确认密码：</div>
                            <el-input
                            type="password"
                            v-model="information.confirmPwd"
                            clearable>
                            </el-input>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div @click="submitForm('information')" class="next-btn">确认修改</div>
                    </el-form-item>
                </el-form>    
            </div>
            
        </div>  
        <div class="footer">
            <div class="footer-wrap">
                <div class="footer-title">
                    <div class="icon"></div><div class="p-text">创巢中小企业众扶平台（中国风险贷款先行者）</div>
                    <div class="tel">
                        <div class="num">
                            全国免费咨询热线：400-969-0660
                        </div>
                        <div class="footer-date">周一到周五 ( 9:00--18:00 )</div>
                    </div>
                </div>
                <div class="footer-text">地址：上海市杨浦区国权路43号财富广场银座24楼 沪ICP备16014815号</div>
                <div class="footer-text">版权所有：© 2010-2017 上海创巢投资管理有限公司 ALL Rightts Reserved.</div>
                <div class="footer-text"><span>信贷平台：</span>杨浦“贷投联动—双创贷”项目<span class="sort">|</span>上海市技术合同备案企业专属信贷平台<span class="sort">|</span>挂牌无忧贷</div>
                <div class="footer-sort">
                    <div class="sort-text">
                        <div class="icon"></div>沪公网安备 31011002000967号
                    </div>
                    <div class="sort-item">
                        <div class="sort-list"><a href="https://www.chuangchao.org/about/">关于我们</a><span>|</span></div>
                        <div class="sort-list"><a href="https://www.chuangchao.org/news/">新闻资讯</a><span>|</span></div>
                        <div class="sort-list"><a href="https://www.chuangchao.org/service.html">服务项目</a><span>|</span></div>
                        <div class="sort-list"><a href="https://www.chuangchao.org/contact/">联系我们</a> <span>|</span></div>
                        <div class="sort-list"><a href="https://www.chuangchao.org/sitemap.html">网站地图</a> </div>
                    </div>
                </div>
                <div class="footer-wechat">
                    <img src="../../images/weim.png" alt="">
                    <div>微信扫码关注</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js');
export default {
    data() {
        return {
            information: {
             confirmPwd: "string",
             newPwd: "string",
             oldPwd: "string"
            },
            rules: {
                oldPwd:[
                    {required: true, message: '请输入密码', trigger: 'change'  }
                ],
                newPwd: [
                    { required: true, message: '请输入新密码', trigger: 'blur' }
                ],
                confirmPwd:[
                    {required: true, message: '请输入确认密码', trigger: 'change'  }
                ],
            },
            name:''
        }
    },
    components: {
        'web-header':() => import('../common/web-header'),
        'web-footer':() => import('../common/web-footer')
    },  
    mounted(){
        this.name = common.getCookie('nickname')
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    methods:{
        linkTo(link){
           this.$router.push(link)
        },
        loginOut(){
             common.setCookie('sessionId','')
             common.setCookie('nickname','')
             this.$nextTick(() => {
                this.$router.replace('/login')
             })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                   let  url = CONSTANT.URL.WEB.MODIFYPWD,
                    data = this.information,
                    dataForm = {}
                    common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                        this.centerDialogVisible = false;
                        if(res.status == 200){
                            this.$message({
                                message: '修改成功！',
                                type: 'success'
                            });
                        }else{
                            this.$message.error(res.msg);
                        }
                    })
                } else {
                    return false;
                }
            });
        },
    }
}
</script>

<style lang="scss">
    .change-wrap{
        .header-top{
            border-bottom: 1px solid rgba(153,153,153,0.4);
        }
        .footer{

            height: 221px;
            background-color: #f5f5f5;
            padding-top: 42px;
            padding-bottom: 30px;
            .footer-wrap{
                position: relative;
                width: 1197px;
                margin: 0 auto;
                overflow: hidden;
                height: 100%;
                font-size: 14px;
                color: #111;
                .footer-title{
                    overflow: hidden;
                    .icon{
                        background-size: 100%;
                        background-image: url(../../images/footer-logo.png);
                        width: 28px;
                        height: 24px;
                        float: left;
                        margin-right: 0.67%;
                    }
                    .p-text{
                        float: left;
                        height: 24px;
                        font-size: 16px;
                        line-height: 24px;
                        font-weight: bold;
                    }
                    .tel{
                        float: left;
                        margin-left: 4.25%;
                        font-size: 16px;
                        font-weight: bold;
                        .footer-date{
                            height: 18px;
                            line-height: 18px;
                            font-size: 16px;
                            font-weight: bold;
                            margin-top: 15px;
                        }
                    }
                }
                .footer-text{

                }
            }
            .footer-text{
                margin-top: 15px;
                font-size: 14px;
                span{
                    color: #ED7018;
                    &.sort{
                        margin: 0 10px;
                    }
                }
            }
            .footer-sort{
                overflow: hidden;
                margin-top: 35px;
                .sort-text{
                    float: left;
                    color: #111;
                    font-size: 14px;
                    width:27.5%;
                    .icon{
                        background-size: 100%;
                        background-image: url(../../images/ghs.png);
                        width: 18px;
                        height: 20px;
                        float: left;
                        margin-right: 5px;
                    }
                }
                .sort-item{
                    float: right;
                    .sort-list{
                        float: left;
                        margin-right: 10px;
                        cursor: pointer;
                        a{
                            color: #111;
                            &:hover{
                                color: #ED7018;
                            }
                        }
                        span{
                            margin: 0 0px 0 8px;
                        }
                    }
                }
            }
            .footer-wechat{
                position: absolute;
                top: 0px;
                right: 0;
                img{
                    width: 122px;
                    height: 122px;
                    margin-bottom: 5px;
                }
                div{
                    text-align: center;
                    font-size: 16px;
                    color: #111;
                }
            }
        }
        .header{
            height: 40px;
            background-color: #F5F5F5;
            font-size: 14px;
            line-height: 40px;
            padding-right: 18.7%;
            overflow: hidden;
            width: 85%;
            .tip{
                padding: 0 1.46% 0 .52%;
            }
            .login1{
                color: #EE7723;
                cursor: pointer;
            }
            .header-select{
                position: relative;
                color: #EE7723;
                padding-right: 1.98%;
                &:after{
                    content: '';
                    position: absolute;
                    width: 1px;
                    height: 14px;
                    background-color: #D1D1D1;
                    right: 0;
                    top:14px;
                }
            }
            div{
                float: right;
                cursor: pointer;
            }
        }
        .nav-wrap{
            width: 1200px;
            margin: 0 auto;
            position: relative;
            height: 138px;
            line-height: 138px;
            background-color: #fff;
            overflow: hidden;
            .logo{
                cursor:pointer;
                position: absolute;
                top: 31px;
                left: 0%;
                width: 313px;
                height: 76px;
                color: #fff;
                background-size: 100%;
                background-image: url(../../images/logo.png);
            }

            .nav-item{
                float: right;
                font-size: 24px;
                color: #666;
                // margin-right: 14%;
                .nav-list{
                    float: left;
                    width:225px;
                    text-align: center;
                    cursor: pointer;
                    span{
                        color: #666;
                    }
                    &.active{
                        color: #EE7723;
                        span{
                            color: #EE7723;
                            height: 105px;
                            display: inline-block;
                            border-bottom: 2px solid #EE7723;
                        }
                    }
                    &:hover{
                        span{
                            color: #EE7723;
                            transition:all .5s linear
                        }

                    }
                }
            }
        }

        .change-container{
            width: 1200px;
            margin: 0 auto;
            padding: 30px 0 72px;
            .el-form-item{
                margin-bottom: 0;
            }
            .content1{
                padding-top: 40px;
            }
            .content-list{
                position: relative;                
                overflow: hidden;
                margin-bottom: 20px;
                .el-date-editor{
                    input{
                        font-size: 14px;
                    }
                }
                .el-input{
                        input{
                            font-size: 14px!important;
                        }
                    }
                .el-select{
                    .el-input{
                        input{
                            font-size: 14px!important;
                        }
                    }
                    }
                &.type{
                     .el-select{
                        float: left;
                        width: 50%;
                        .el-input{
                            width: 100%;
                            input{
                                width: 100%;
                            }
                        }
                     }
                }
                &.line{
                    .el-select{
                        width: 23.75%;
                         margin-right: 1.8%;
                        .el-input{
                            width: 100%;
                            input{
                                width: 100%;
                                height: 54px;
                                border: 1px solid #E1E1E1;
                                font-size: 18px;
                                color: #333
                            }
                        }
                    }
                }
                &.address{
                    .el-select{
                        width: 15%;
                         margin-right: 1.8%;
                        .el-input{
                            width: 100%;
                            input{
                                width: 100%;
                                height: 54px;
                                border: 1px solid #E1E1E1;
                                font-size: 18px;
                                color: #333
                            }
                        }
                    }
                }
                
                .send-btn{
                        position: absolute;
                        right: 0;
                        width: 169px;
                        height: 54px;
                        line-height: 54px;
                        text-align: center;
                        font-size: 18px;
                        color: #fff;
                        background-color: #ED7018;
                        cursor: pointer;
                        &:hover{
                            background-color: #ED9000;
                            transition:all .2s linear;
                        }
                    }
                .name{
                    float: left;
                    height: 54px;
                    line-height: 54px;
                    font-size: 18px;
                    color: #111;
                    width: 20.75%;
                    text-align: right;
                    margin-right: 2.375%;
                }
                .el-input{
                    float: left;
                    width: 50%;
                }
                .el-input__inner{
                    border: 1px solid #e1e1e1;
                    height: 54px;
                    font-size: 18px;
                    border-radius: 2px;
                    -webkit-border-radius: 2px;
                }
            }
            .el-form-item__error{
                top: 73%;
                left: 235px;
            }

            .next-btn{
                width: 50%;
                margin-left: 23.2%;
                margin-bottom: 20px;
                height: 54px;
                line-height: 54px;
                text-align: center;
                font-size: 18px;    font-size: 18px;
                color: #fff;
                background-color: #ED7018;
                cursor: pointer;
                
                &:hover{
                    background-color: #ED9000;
                    transition:all .2s linear;
                }
            }
        }
    }
</style>
